<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>商品-新增</title>
        <meta name="renderer" content="webkit">
        <link rel="stylesheet" href="../../css/font.css"/>
        <link rel="stylesheet" href="../../css/xadmin.css"/>
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../js/xadmin.js"></script>
        <script src="../../js/vue2.7min.js"></script>
        <script src="../../js/axios.min.js"></script>
    </head>
    <body>
        <div class="layui-fluid" id="app">
            <div class="layui-row">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>所属供应商信息</label>

                <div class="layui-input-inline">
                    <select v-model="goodsSupplierId" style="width:190px; height: 30px; border: grey">
                        <option v-for="ss in goodsSupplierData" :value="ss.id">
                            {{ ss.id }} -- {{ss.name}}
                        </option>
                    </select>
                </div>
                <form class="layui-form">

                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>商品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_username1" required="" lay-verify="name" autocomplete="off"
                                   class="layui-input"
                                   v-model="goodsName"></div>
                        <div class="layui-form-mid layui-word-aux">2到20个字符</div>
                    </div>

                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>商品价格</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_usernam2e" required="" lay-verify="name" autocomplete="off"
                                   class="layui-input"
                                   v-model="goodsPrice"></div>
                        <div class="layui-form-mid layui-word-aux">商品价格</div>
                    </div>

                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>商品信息</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_userna3me" required="" lay-verify="name" autocomplete="off"
                                   class="layui-input"
                                   v-model="goodsMessage"></div>
                        <div class="layui-form-mid layui-word-aux">2到200个字符</div>
                    </div>

                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>商品地址</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_username" required="" lay-verify="name" autocomplete="off"
                                   class="layui-input"
                                   v-model="goodsAddress"></div>
                        <div class="layui-form-mid layui-word-aux">2到200个字符</div>
                    </div>


                </form>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn" lay-submit="" @click="add">增加</button>
            </div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    //管理员信息
                    id: null,
                    name: "测试name",
                    level: 1,
                    password: null,
                    phone: 11111111111,
                    realName: "球球人",
                    sex: "男",
                    status: 1,
                    createTime: null,
                    updateTime: null,
                    createUser: null,
                    updateUser: null,
                    //分页属性
                    supplierId: null,
                    supplierMaster: null,
                    supplierName: "普通丘丘人",
                    supplierPhone: "12312312312",
                    supplierAddress: "提瓦特",
                    supplierMessage: "可爱丘丘人",
                    supplierEmail: "qiuqiuren@qq.com",
                    supplierStatus: null,
                    supplierCreateTime: null,
                    supplierUpdateTime: null,
                    supplierCreateUser: null,
                    supplierUpdateUser: null,
                    suppliersData: null,
                    //商品信息
                    goodsId: null,
                    goodsName: null,
                    goodsSupplierId: null,
                    goodsPrice: null,
                    goodsMessage: null,
                    goodsAddress: null,
                    //最开始查询的名下供应商数据
                    goodsSupplierData: null

                },
                methods: {
                    getAllSuppliers() {
                        axios.post("../../../supplier/getAllSuppliers")
                            .then(function (response) {
                                console.log("打印查询的名下supplier的信息");
                                //数据保存到vue全局
                                console.log(response)
                                vm.goodsSupplierData = response.data;
                            }, function (err) {
                                console.log(err);

                            })
                    },
                    add() {
                        //首先校验数据合法性
                        if (vm.goodsName === null || vm.goodsName === "" || vm.goodsName.length < 2 || vm.goodsName.length > 200) {
                            layer.alert("商品不可为空且长度在[2-200]哦", {
                                icon: 6
                            })
                        } else if (vm.goodsPrice === null || vm.goodsPrice === "") {
                            layer.alert("价格不可为空", {
                                icon: 6
                            })
                        } else if (vm.goodsMessage === null || vm.goodsMessage === "" || vm.goodsMessage.length < 2 || vm.goodsMessage.length > 200) {
                            layer.alert("信息不可为空且长度在[2-200]哦", {
                                icon: 6
                            })
                        } else if (vm.goodsAddress === null || vm.goodsAddress === "" || vm.goodsAddress.length < 2 || vm.goodsAddress.length > 200) {
                            layer.alert("地址不可为空且长度在[2-200]哦", {
                                icon: 6
                            })
                        } else {
                            console.log("开始上传数据");
                            //开始axios通信
                            var jsonData = {
                                supplierId: vm.goodsSupplierId,
                                name: vm.goodsName,
                                price: vm.goodsPrice,
                                address: vm.goodsAddress,
                                message: vm.goodsMessage
                            }
                            axios.post("../../../goods/add", jsonData)
                                .then(function (response) {
                                    //数据保存到vue全局
                                    console.log(response)
                                    if (response.data.code === 1) {
                                        layer.alert("数据新增成功", {
                                            icon: 6
                                        })
                                    }
                                }, function (err) {
                                    console.log(err);

                                })
                        }


                    }
                },
                mounted: function () {
                    this.getAllSuppliers();
                    // this.goodsSupplierId = this.goodsSupplierData[0].id;
                }
            });
        </script>
    </body>

</html>